<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>用户管理</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<script src="/js/clipboard.min.js"></script>
		<style type="text/css">
		body{
				position: relative;
			}
		.search_grade{
			margin-left: 10px;
		    border-radius: 3px;
		    padding: 3px;
		}
		html,body{
			font-size: 62.5%!important;
			color: #333;
			background-color: #f5f5f5 !important; 
		}
			#wrapper{
				 left:0;
				 top:0;
				 position: absolute; 
				 width: 100%;
				 padding: 0rem 0.4rem ;
			 }
			#scroller{
				margin-top: 50px;
				display: flex;
				flex-direction: column;
			}
			.search_user{
			    margin: 1rem 2rem;
   				padding: 0 .5rem;
   				 box-sizing: border-box;
			    -webkit-tap-highlight-color: transparent; 	
			    border-radius: 5px;
		        height:44px;
		        min-height:44px;
			    padding-left: 15px;
		        position: relative;
			    display: flex;
		        flex: 1 1;
			    background-color: #fff;
			    vertical-align: middle;
			    overflow: hidden;
			    transition: background-color .2s;
			    align-items: center;
			    align-self: stretch;
			    padding-right: 15px;
			    overflow: hidden;
  			}
			
			
			.search_user input{
				color: #000;
			    font-size: 17px;
			    width: 80%;
			    padding: 2px 0;
			    border: 0;
			    background-color: transparent;
			    line-height: 1;
			    box-sizing: border-box;
		        overflow: visible;
		        margin: 0;
			}
			.search_user button{
				color: #fff;
    			background-color: #3180eb;
    			font-size:1.6rem;
    			height: 2.6rem;
			    line-height: 2.6rem;
			    padding: 0 .8rem;
    			margin-left: 5px;
    			display: block;
			    outline: 0 none;
			    -webkit-appearance: none;
			    box-sizing: border-box;
			    text-overflow: ellipsis;
			    word-break: break-word;
			    white-space: nowrap;	
			    /* padding: 0 10px; */
			  /* width:80px; */
			    border-radius: 5px;
			    opacity: 1;
			   /*  height: 36px;
			    line-height: 36px;	 */
			    border: 1px solid #3180eb;  
			}
			.user_message{
				font-size: 0.4rem;
    			padding: .5rem 1.5rem;
    			font-size: #000 !important;
			}
			.user_message span.user_content{
			}
			.user_message span.user_name{
				overflow: auto;
				font-size:16px;
			 /*    background: #fff; */
			    padding: .14rem .12rem;
			  /*   border: 1px solid #999; */
			    border-radius: 5px;
			}
			table.dataTable thead th, table.dataTable thead td{
				/* padding:0;  */
				text-align: center;
				border:none;
				outline: none;
				font-size: 1.4rem;
				 padding:10px 10px;
				 width:72px; 
			  /*   display: inline-block;
			    width: 6rem; */
			    /* word-wrap: break-word;
			    word-break: break-all;
			    white-space: normal; */
			}
		/*	 #table-i-dailiList thead{
				display: flex;
			}
		 	#table-i-dailiList thead tr{
				display: flex;
			}
			#div-user-message{
				display: flex;
			}
			.no-footer thead tr{
				display: flex;
			} */ 
			
			/* thead{
				display: flex !important;
			} */
			/* tr{
				display: flex !important;
			} */
			table.dataTable tbody th, table.dataTable tbody td {
				 padding:10px 10px; 
				text-align: center;
				width:72px ;
				font-size: 1.4rem;
				border:none;
				outline: none;
			}
			
			
			/* tr{
				display: inline-table;
			    overflow: auto;
			    font-size: 1.4rem;
			    color: #333;
			    background: #fff;
			        display: inline-table;
			    font-size: 1.3rem;
			    text-align: center;
			    padding: 1rem;
			    background: #fff;
			    border-bottom: 1px solid #f5f5f5;
			    color: #999;
			    white-space: nowrap;
			} */
			table.dataTable.no-footer {
			     border-bottom: none;
			     background: #fff;
			}
			.dataTables_paginate span {
				display: none!important;
			}
			
			.dataTables_wrapper {
				padding: 0 0.3rem;
				margin-top: 0.5rem;
			}
			.table-bordered{
				border:none;
			}
			.dataTables_wrapper.no-footer .dataTables_scrollBody {
			    border:none;
			}
			
			.dataTables_scrollHeadInner{
			/* width: -webkit-fill-available !important; */
			}
			/* .dataTables_scrollHead{
				overflow: scroll !important;
			} */
			.content_error{
				display:none;
			    -ms-flex-direction: column;
			    flex-direction: column;
			    -ms-flex-align: center;
			    align-items: center;
			    -ms-flex-pack: center;
			    justify-content: center;
			    height: 500px;
			}
			.icon_error{
				width: 18rem;
			    height: 16rem;
			    background: url(/img/no_data.png) 50% no-repeat;
			    background-size: contain;
			}
			.div-table-container{
			   /*  display: none;
				-ms-flex-direction: column;
			    flex-direction: column;
			    -ms-flex: 1 1;
			    flex: 1 1;
			    overflow-y: hidden;
			    overflow-x: hidden; */
			}
			.text_error{
				margin: 6px 0 15px;
			    font-size: 1.5rem;
			    color: #999;
			}
			th,td{
				white-space:nowrap;
			}
		</style>
	</head>

	<body ><!-- onclick="back()" -->
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="color:white;background: #059BF3;height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding-left:0;padding-right:0;">
			<a  onclick="back()"  class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
			<strong style="font-size: 20px;">用户管理</strong>
		</div>
		<div id="scroller" class="col-xs-12 col-sm-4 col-sm-offset-4" style="height: 100%;padding:0;" >
			<div class="search_user">
				<input  class="search_name" placeholder="请输入用户名" maxlength="20" type="text" value=""/>
				<button>搜索</button>
				<select class="search_grade">
				<!--  <option value="0">代理等级</option> -->
				 <option value="1">一级代理</option>
				  <option value="2">二级代理</option>
				   <option value="3">三级代理</option>
				    <option value="4">四级代理</option>
				     <option value="5">五级代理</option>
				</select>
			</div>
			
			<div class="user_message">
				<span class="user_content">当前用户：</span>
				<span class="user_name">${user.name}</span>
			</div>
			
			<div class="div-table-container">
				<table id="table-i-dailiList"  class=" table-striped table-bordered table-hover">
					<thead >
						<tr>
							<th style="display:none;"></th>
							<td>会员账号</td>
							<td>代理等级</td>
							<td>返点金额</td>
							<td>团队人数</td>
							<td>团队余额</td>
							<td>个人余额</td>
							<td>个人充值</td>
							<td>个人提款</td>
							<td>个人投注</td> 
						</tr>
					</thead>
					<tbody id="div-user-message">
	 					
					</tbody>
				</table>
				
				<div class="content_error">
					<div class="icon_error"></div>
					<div class="text_error"></div>
				</div>
			</div>
			
				<!-- <div class="div_user_content">
					<ul>
						
					</ul>	
				</div> -->
		</div>
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>			
				<script type="text/javascript">
			function jianrong() {
				/* 动态设置 html font-size, 使用 rem 适配 */
				var htmlSelector = document.documentElement
				var width = htmlSelector.clientWidth
				if (width > 600) {
					width = 600
				}
				var fSize = width / 7.5
				htmlSelector.style.fontSize = String(fSize) + "px"
				htmlSelector.dataset.fontrem = fSize.toFixed(2)
			}
			jianrong();
			var user_id;
			function dataTable01(){
				var oTable=	$("#table-i-dailiList").DataTable({
						 "bProcessing" : false, // 是否显示取数据时的那个等待提示
						"bServerSide" : true,//这个用来指明是通过服务端来取数据
						 "bPaginate" : true, //是否显示分页 
						"sAjaxSource" : "/agent/findOneAgent.do",//这个是请求的地址
						"fnServerData" : retrieveData, // 获取数据的处理函数
						"destroy":true,
					      // "bPaginate": true,
					       "bLengthChange": true,      
					      "bSort": false,
					    //  "dom": "t<'tableinfo'i<'tableSearch'p>l>", 
					       "bInfo": true,
					      "bAutoWidth": false,
//					         "bServerSide":true,
					      'aLengthMenu':[10], 
					      "dom": 't<"toolbar" pi>',
					       "searching": false,  
					     /*   "pagingType": "simple_numbers", */
					       "scrollX": true,
		    	            "autoWidth":false,
		    	            "language": {//语言设置  
						    	     "zeroRecords": "没有消息",     
						            "sInfo": "第 _PAGE_ / _PAGES_ 页",     
						             "info": "没有数据",      
						            "oPaginate": {     
						                "sFirst": "首页",     
						                "sPrevious": "上一页",     
						                "sNext": "下一页",     
						                "sLast": "尾页"    
						          	},
						            "search":"",
						            "searchPlaceholder": "请输入关键字",
						            "infoFiltered":   "",
						            "infoEmpty":      "",
						         }, 
					         "columnDefs": [{"defaultContent": "",
		                          "targets": "_all"}],
		                          "columns": [
		                        	  	{ "data": "user_id","className": "hidden-td user_id-td" },
					                     { "data": "user_name","className": "user_name-td" },
					                     { "data": "agent_grade","className": "agent_grade-td"},
					                     { "data": "rebate_money" ,"className": "rebate_money-td"},
					                     { "data": "state","className": "state-td"},
					                     { "data": "balance" ,"className": "balance-td"},
					                     { "data": "one_money","className": "one_money-td" },
					                     { "data": "one_recharge","className": "one_recharge-td" },
					                     { "data": "one_drawing" ,"className": "one_drawing-td"},
					                     { "data": "one_betting","className": "one_betting-td" }, 
					                 ],	 
					})
		function retrieveData(sSource, aoData, fnCallback) {
					$.ajax({
						url : sSource,//这个就是请求地址对应sAjaxSource
						data : {
							"pageCount":aoData[0].value,
							"startIndex":aoData[3].value,
							"lineCount":aoData[4].value,
							/*  "startDate":$("#date1").val(),
							"endDate":$("#date2").val(),
							"userName":$("#userName").val(),
							"agentName":$("#daili").val(),  */
						},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
						type : 'post',
						dataType : 'json',
						async : false,
						 
						success : function(result) { 
							var newData=result.aaData;
						  	 if(newData.length==0){
						  		$(".dataTables_scrollHead")[0].style.overflow="scroll";
								$(".dataTables_scrollBody")[0].style.display="none";
								$(".toolbar")[0].style.display="none";
								$(".content_error")[0].style.display="flex";
								$(".text_error").text("用户为空")
							} 
							 else if(newData.length<10){
								 $(".dataTables_scrollHead")[0].style.overflow="hidden";
								 $(".dataTables_scrollBody")[0].style.display="block";
								 $(".toolbar")[0].style.display="block";
								 $(".content_error")[0].style.display="none"; 
								 $(".text_error").text("");
							 }else{
								 $(".dataTables_scrollHead")[0].style.overflow="hidden";
								 $(".content_error")[0].style.display="none"; 
								 $(".text_error").text("");
								 $(".toolbar")[0].style.display="block";
							 }  
							
							 for(i=0;i<newData.length;i++){
								 item=newData[i];
								 user_id=item.user_id;
								item.agent_grade=item.agent_grade+"级代理"
							 }
							fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
						},
						error : function(msg) {
						}
					});
				}
			}
		 dataTable01()
		
			$(".search_grade").bind("change",function(event){
	            $.post("/agent/findAgentInfo.do",{"grade":$(this).val(),"name":$('.search_name').val()},function(data){
	            	var newData=data.data;
					if(newData==""){
						$(".dataTables_scrollHead")[0].style.overflow="scroll";
						$(".dataTables_scrollBody")[0].style.display="none";
						$("#div-user-message")[0].style.display="none"; 
						$(".toolbar")[0].style.display="none"; 
						$(".content_error").css("display","flex");
						$(".text_error").text("用户为空")
					}else{
						$(".dataTables_scrollHead")[0].style.overflow="hidden";
						$("#div-user-message")[0].style.display="block"; 
					 	$(".dataTables_scrollBody")[0].style.display="block";
						$(".content_error")[0].style.display="none";
						$(".text_error").text("");
						$("#div-user-message").empty();
						$(".state-td")[0].style.display="none";
						$(".balance-td")[0].style.display="none";
					var html="";
					for(var i in newData){
						html+="<tr role='row' class='odd' style='display:flex;'>"+
								"<td class='user_name-td' style='width:88px' >"+newData[i].user_name+"</td>"+
								"<td class='agent_grade-td' style='width:88px' >"+newData[i].agent_grade+"级代理</td>"+
								"<td class='rebate_money-td' style='width:88px'>"+newData[i].rebate_money+"</td>"+
								"<td class='one_money-td' style='width:88px'>"+newData[i].one_money+"</td>"+
								"<td class='one_recharge-td' style='width:88px'>"+newData[i].one_recharge+"</td>"+
								"<td class='one_drawing-td' style='width:88px'>"+newData[i].one_drawing+"</td>"+
								"<td class='one_betting-td' style='width:88px'>"+newData[i].one_betting+"</td>"+	
						  "</tr>";
					}
						  $("#table-i-dailiList thead")[0].style.display="flex";
						  $("#div-user-message").append(html);
						  $("#div-user-message tr")[0].style.display="inherit";
						  $(".toolbar")[0].style.display="none";
					} 
				}) 
        	});
		 
			$(".search_user").find("button").on("click",function(){
				if($(".search_user").find("input").val()==""){
					return
				}else{ 
					$.ajax({
						type:"post",
						url:"/agent/findAgentInfo.do",
						data:{
							"name":$(".search_user").find("input").val(),
							"grade":$(".search_grade").val(),
						},
						success:function(data){
							var newData=data.data;
							if(newData==""){
								$(".dataTables_scrollHead")[0].style.overflow="scroll";
								$(".dataTables_scrollBody")[0].style.display="none";
								$("#div-user-message")[0].style.display="none"; 
								$(".toolbar")[0].style.display="none"; 
								$(".content_error").css("display","flex");
								$(".text_error").text("用户为空")
							}else{
								
								$(".dataTables_scrollHead")[0].style.overflow="hidden";
								$("#div-user-message")[0].style.display="flex"; 
							 	$(".dataTables_scrollBody")[0].style.display="block";
								$(".content_error")[0].style.display="none";
								$(".text_error").text("") 
							$("#div-user-message").empty();
							$(".state-td")[0].style.display="none";
							$(".balance-td")[0].style.display="none";
							
							var html=
								"<tr role='row' class='odd'>"+
									"<td class='user_name-td' style='width:88px' >"+newData[0].user_name+"</td>"+
									"<td class='agent_grade-td' style='width:88px' >"+newData[0].agent_grade+"级代理</td>"+
									"<td class='rebate_money-td' style='width:88px'>"+newData[0].rebate_money+"</td>"+
									"<td class='one_money-td' style='width:88px'>"+newData[0].one_money+"</td>"+
									"<td class='one_recharge-td' style='width:88px'>"+newData[0].one_recharge+"</td>"+
									"<td class='one_drawing-td' style='width:88px'>"+newData[0].one_drawing+"</td>"+
									"<td class='one_betting-td' style='width:88px'>"+newData[0].one_betting+"</td>"+	
							  "</tr>"
							  $("#table-i-dailiList thead")[0].style.display="flex";
							  $("#div-user-message").append(html);
							  $("#div-user-message tr")[0].style.display="inherit";
							  $(".toolbar")[0].style.display="none";
						} 
						}
					}) 
				} 
			})
			
			/* var isClick=false;
			 $("#div-user-message tr").on("click",function(){
				 isClick=!isClick; 
				 if(isClick){
					 
				 } */
				/*  $(this).after() */    //在其后面插入分页	
				/* $.ajax({
					type:'post',
					url:"/agent/findAllAgent.do",
					 data:{
						"user_id":$(this).find(".user_id-td").text(),
					}, 
					success:function(data){
						/* $(this).after("<div>123</div>") 
					}
				})
			}) */
			/* ajax({
				url:"/u/dallisy.do",
				success:function(data){
					var json=eval('('+data+')');
					$("#jinri").text(json.data[0]);
					$("#zuori").text(json.data[1]);
					$("#suoyou").text(json.data[2]);
				}
			});
			function getIcode(){
				ajax({
					url:"/u/yqm.do",
					success:function(data){
						var json=eval('('+data+')');
						$("#icode").val(json.message);
						$(this).remove()
					}
				});
			}		
			if ("${user.state}" === "2") {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "试玩账号无法进行推广，请注册为正式账号")
			} else {
				getIcode();
			}
	       var clipboard = new ClipboardJS('#copy_btn');      
	       clipboard.on('success', function(e) {      
	           e.clearSelection();      
	       })
	       $("#copy_btn").on(getEndClickEvent(), function() {
	    	   showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "复制成功！")
	       }) */
		</script>
	</body>
</html>